Ситидрайв. Дизайн новой программы лояльности

Задача

Сделать выгоду наглядной

В 2022 году каршеринг Ситидрайв запустил новую программу лояльности: обновились уровни пользователей, а вместо процентной скидки появился кэшбэк — драйв-бонусы, которые можно копить или тратить на поездки и дополнительные опции. Перед группой дизайна встала задача продумать и реализовать удобный и эффективный UX.

Решение

Система, в которой всё видно

Мы переделали часть системных экранов и создали ряд новых, визуализировали все элементы новой программы лояльности — от бонусов до привилегий, сделали продвижение по уровням программы наглядным, а получаемую выгоду — заметной.

01  Драйв-бонусы

В приложении появилась «валюта» — драйв-бонусы. Взяв за основу фирменные цвета бренда и объёмные 3D-иллюстрации, мы отрисовали «монетки», символизирующие бонусы, и придумали для них собственный знак — перечёркнутую с одной стороны букву D. Этот символ отсылает к названию «валюты».

02  Новые уровни

Помимо драйв-бонусов, мы ввели новую систему уровней — их базовое количество сократилось до пяти, и все они приобрели свой уникальный знак и название. А для новичков появился специальный уровень с повышенным кэшбэком на 30 дней после регистрации.

С новыми иконками пришлось поэкспериментировать. В первой версии у них не было фона.

Оказалось, что такие иконки тяжело использовать вместе, так как у них разная форма. Мы попробовали добавить фон для иконок. Лучшим вариантом стал круг, который ещё является и маской для иконки.

Далее приступили к рендерам. Вариантов было много, но в конечном итоге мы остановились на пастельных, приглушённых цветах, которые хорошо смотрелись рядом друг с другом. Благодаря фону на иконке мы могли сделать обводку, как на первом изображении. С её помощью мы показываем, какой уровень выбран в данный момент.

03  Новые экраны

Главный экран

Драйв-бонусы и личный кабинет программы лояльности мы поместили на главный экран — в удобное для пользователя место. Правда, для этого пришлось полностью этот экран переделать. Мы обновили меню в нижней части, переместили кнопку геолокации в центр и поставили блок с драйв-бонусами в правый верхний угол.

Личный кабинет программы лояльности

В новом личном кабинете клиент может следить за своим прогрессом, проверить баланс драйв-бонусов, выбрать, копит он драйв-бонусы или тратит, а также посмотреть, чем отличаются уровни, просто полистав их свайпами.

Также мы наглядно подсвечиваем «плюшки»: какой процент кэшбэка начисляется на каждом уровне и какую можно получить скидку с помощью драйв-бонусов. А для высоких уровней напоминаем, что теперь для пользователя опция КАСКО доступна бесплатно.

Боковое меню

Чтобы клиент мог легко перейти в личный кабинет программы лояльности из любой страницы в приложении, мы добавили соответствующую кнопку в боковое меню. А в процессе так увлеклись, что ещё и полностью обновили его дизайн.

Профиль

Профиль тоже пришлось обновить. Всё началось с необходимости убрать старую программу лояльности. Но заодно мы освежили дизайн всего блока. И даже поменяли стандартный аватар, который получает каждый пользователь после регистрации. Для этого нарисовали крутые 3D-иллюстрации в двух вариантах: для мужчин и женщин.

Шторка способов оплаты

Помимо новых экранов, мы обновили «шторку» в карточке автомобиля. Добавили возможность списывать или копить драйв-бонусы по аналогии с личным кабинетом. А также отрисовали кейсы ввода промокода или получения скидки. В таком случае драйв-бонусы работать не будут, и мы об этом напишем.

Интеграция со СберСпасибо

Драйв-бонусы Ситидрайва и бонусы от СберСпасибо нельзя использовать одновременно. Нам необходимо было отразить это ограничение в дизайне и реализовать возможность отключать или включать бонусы от СберСпасибо, при этом сохранив возможность оплаты карточкой Сбера. Мы создали специальную шторку с настройками, в которой можно выбрать, копить или списывать бонусы, а также в принципе включить или отключить бонусную систему Сбера.

Результат

Прозрачная система, понятная валюта

Дизайн всех элементов программы лояльности мы разработали за 4 месяца. В процессе сделали сотни разных вариантов экранов, столкнулись с десятком серьёзных проблем, но именно это позволило прийти к оптимальному решению.

После перевода всех пользователей на новый дизайн мы проанализировали отзывы. Пользователи позитивно восприняли решение сделать систему более прозрачной. Теперь каждый клиент понимает, какой у него уровень в данный момент, как получить следующий и чем они отличаются. А новые драйв-бонусы стали валютой внутри приложения, которой легко и удобно управлять.

Над проектом работали

Следующий кейс Платформа развития и обучения врачей Смотреть все проекты Есть похожая задача? Обсудим ваш продукт и предложим план Обсудить проект